CSS @property taisyklė: atskleidžiant individualių savybių tipų apibrėžimo galią

CSS pasaulis nuolat tobulėja, o vienas iš naujausių ir galingiausių papildymų yra @property taisyklė. Ši taisyklė suteikia mechanizmą individualių savybių tipams apibrėžti, suteikiant daugiau kontrolės ir lankstumo jūsų CSS bei atveriant duris sudėtingesnėms animacijoms, patobulintoms temų kūrimo galimybėms ir tvirtesnei bendrai CSS architektūrai. Šiame straipsnyje gilinsimės į @property taisyklę, nagrinėsime jos sintaksę, galimybes ir praktinius pritaikymus, atsižvelgiant į pasaulinę auditoriją.

Kas yra CSS individualios savybės (kintamieji)?

Prieš gilinantis į @property taisyklę, būtina suprasti CSS individualias savybes, dar vadinamas CSS kintamaisiais. Individualios savybės leidžia apibrėžti pakartotinai naudojamas reikšmes jūsų CSS, todėl jūsų stilių aprašai tampa lengviau prižiūrimi ir atnaujinami. Jos deklaruojamos naudojant --kintamojo-pavadinimas sintaksę ir pasiekiamos naudojant var() funkciją.

Pavyzdys:

:root {
  --primary-color: #007bff; /* Globaliai apibrėžta pagrindinė spalva */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

Šiame pavyzdyje --primary-color ir --secondary-color yra individualios savybės. Jei jums reikia pakeisti pagrindinę spalvą visoje svetainėje, tereikia ją atnaujinti vienoje vietoje – :root selektoriuje.

Pagrindinių individualių savybių apribojimas

Nors individualios savybės yra nepaprastai naudingos, jos turi didelį apribojimą: iš esmės jos traktuojamos kaip eilutės. Tai reiškia, kad CSS iš prigimties nežino, kokio tipo reikšmę laiko individuali savybė (pvz., skaičių, spalvą, ilgį). Nors naršyklė bando nustatyti tipą, tai gali sukelti netikėtą elgesį, ypač kai kalbama apie animacijas ir perėjimus. Pavyzdžiui, bandymas animuoti individualią savybę, kuri laiko spalvą, gali neveikti taip, kaip tikėtasi, arba gali neveikti nuosekliai skirtingose naršyklėse.

Pristatome @property taisyklę

@property taisyklė išsprendžia šį apribojimą, leisdama jums aiškiai apibrėžti individualios savybės tipą, sintaksę, pradinę reikšmę ir paveldėjimo elgesį. Tai suteikia daug tvirtesnį ir nuspėjamesnį būdą dirbti su individualiomis savybėmis, ypač jas animuojant ar naudojant perėjimus.

@property taisyklės sintaksė

Pagrindinė @property taisyklės sintaksė yra tokia:

@property --property-name {
  syntax: <syntax-value>;
  inherits: <boolean>;
  initial-value: <value>;
}

Išskaidykime kiekvieną taisyklės dalį:

• --property-name: Tai yra individualios savybės, kurią apibrėžiate, pavadinimas. Jis turi prasidėti dviem brūkšneliais (--).
• syntax: Tai apibrėžia laukiamą individualios savybės reikšmės tipą. Tai eilutė, apibūdinanti galimas reikšmes individualiai savybei. Įprastos sintaksės reikšmės apima:
• *: Atitinka bet kokią reikšmę. Tai yra numatytoji reikšmė, jei sintaksė nenurodyta. Naudokite atsargiai, nes tai apeina tipo tikrinimą.
• <color>: Atitinka bet kokią galiojančią CSS spalvos reikšmę (pvz., #ff0000, rgb(255, 0, 0), red).
• <length>: Atitinka bet kokią galiojančią CSS ilgio reikšmę (pvz., 10px, 2em, 50%).
• <number>: Atitinka bet kokią skaičiaus reikšmę (pvz., 1, 3.14, -2.5).
• <integer>: Atitinka bet kokią sveikojo skaičiaus reikšmę (pvz., 1, -5, 0).
• <angle>: Atitinka bet kokią kampo reikšmę (pvz., 45deg, 0.5rad, 100grad).
• <time>: Atitinka bet kokią laiko reikšmę (pvz., 1s, 500ms).
• <percentage>: Atitinka bet kokią procentinę reikšmę (pvz., 50%, 100%).
• <image>: Atitinka bet kokią paveikslėlio reikšmę (pvz., url(image.jpg), linear-gradient(...)).
• <string>: Atitinka bet kokią eilutės reikšmę (apgaubtą dvigubomis arba viengubomis kabutėmis).
• Taip pat galite derinti sintaksės aprašus naudodami |, kad leistumėte kelis tipus (pvz., <length> | <percentage>).
• Galite naudoti reguliariąsias išraiškas sudėtingesnei sintaksei apibrėžti. Tai naudoja CSS plačiai paplitusius raktinius žodžius inherit, initial, unset ir revert kaip galiojančias reikšmes, jei sintaksė juos nurodo, net jei jie paprastai neleidžiami sintaksės tipui. Pavyzdys: '\\d+px' leidžia reikšmes kaip '10px', '200px', bet ne '10em'. Atkreipkite dėmesį į dvigubą atvirkštinio brūkšnio išvengimą.
• inherits: Tai yra loginė reikšmė (true arba false), nurodanti, ar individuali savybė turėtų paveldėti savo reikšmę iš savo tėvinio elemento. Numatytoji reikšmė yra false.
• initial-value: Tai apibrėžia pradinę individualios savybės reikšmę. Tai yra reikšmė, kurią savybė turės, jei ji nebus aiškiai nustatyta elementui. Svarbu pateikti galiojančią pradinę reikšmę, atitinkančią apibrėžtą syntax. Jei pradinė reikšmė nepateikta ir savybė nėra paveldima, jos pradinė reikšmė bus negaliojanti savybės reikšmė.

Praktiniai @property taisyklės pavyzdžiai

Pažvelkime į keletą praktinių pavyzdžių, iliustruojančių, kaip @property taisyklę galima naudoti realaus pasaulio scenarijuose.

1 pavyzdys: individualios spalvos animavimas

Spalvų animavimas naudojant standartinius CSS perėjimus kartais gali būti sudėtingas. @property taisyklė tai labai palengvina.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Užvedus pelę, pasikeičia į žalią spalvą */
}

Šiame pavyzdyje apibrėžiame individualią savybę pavadinimu --brand-color ir nurodome, kad jos sintaksė yra <color>. Taip pat nustatome pradinę reikšmę #007bff (mėlynos atspalvis). Dabar, užvedus pelę ant .element, fono spalva sklandžiai pereina iš mėlynos į žalią.

2 pavyzdys: individualaus ilgio animavimas

Ilgio (pvz., pločio, aukščio) animavimas yra dar vienas įprastas @property taisyklės naudojimo atvejis.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Čia apibrėžiame individualią savybę pavadinimu --element-width ir nurodome, kad jos sintaksė yra <length>. Pradinė reikšmė nustatyta į 100px. Užvedus pelę ant .element, jo plotis sklandžiai pereina nuo 100px iki 200px.

3 pavyzdys: individualios progreso juostos kūrimas

@property taisyklė gali būti naudojama kuriant individualias progreso juostas su didesne animacijos kontrole.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

Šiame pavyzdyje apibrėžiame individualią savybę pavadinimu --progress, kuri atspindi progreso procentą. Tada naudojame calc() funkciją, kad apskaičiuotume progreso juostos plotį pagal --progress reikšmę. Nustatydami data-progress atributą .progress-bar elementui, galime kontroliuoti progreso lygį.

4 pavyzdys: temų kūrimas su individualiomis savybėmis

@property taisyklė pagerina temų kūrimą, suteikdama patikimesnį ir nuspėjamesnį elgesį pereinant tarp skirtingų temų. Apsvarstykite šį pavyzdį paprastam tamsios/šviesios temos perjungimui:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Šviesios temos numatytoji reikšmė */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Šviesios temos numatytoji reikšmė */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Tamsi tema */
    --text-color: #ffffff;
}

Apibrėžus --bg-color ir --text-color su @property taisykle, perėjimas tarp temų bus sklandesnis ir patikimesnis, palyginti su pagrindinių individualių savybių naudojimu be apibrėžtų tipų.

Naršyklių suderinamumas

2023 m. pabaigoje @property taisyklės palaikymas moderniose naršyklėse, įskaitant „Chrome“, „Firefox“, „Safari“ ir „Edge“, yra gana geras. Tačiau visada verta patikrinti naujausią naršyklių suderinamumo informaciją svetainėse, tokiose kaip „Can I Use“ (caniuse.com), kad įsitikintumėte, jog jūsų tikslinė auditorija turi tinkamą šios funkcijos palaikymą.

Jei jums reikia palaikyti senesnes naršykles, kurios nepalaiko @property taisyklės, galite naudoti funkcijos aptikimą su „JavaScript“ ir pateikti atsarginius sprendimus. Pavyzdžiui, galite naudoti „JavaScript“, kad nustatytumėte, ar naršyklė palaiko CSS.registerProperty („JavaScript“ API, susietą su @property), ir tada taikyti alternatyvius stilius, jei ji nepalaikoma.

Geriausios praktikos naudojant @property taisyklę

Štai keletas geriausių praktikų, kurių reikėtų nepamiršti naudojant @property taisyklę:

• Atidžiai apibrėžkite sintaksę: Pasirinkite tinkamiausią sintaksės reikšmę savo individualiai savybei. Tai padės išvengti klaidų ir užtikrins, kad jūsų CSS veiks kaip tikėtasi.
• Pateikite pradines reikšmes: Visada pateikite initial-value savo individualioms savybėms. Tai užtikrina, kad savybė turės galiojančią reikšmę, net jei ji nebus aiškiai nustatyta elementui.
• Apsvarstykite paveldėjimą: Atidžiai apsvarstykite, ar jūsų individuali savybė turėtų paveldėti savo reikšmę iš savo tėvinio elemento. Daugeliu atvejų geriausia nustatyti inherits į false, nebent turite konkrečią priežastį įjungti paveldėjimą.
• Naudokite aprašomuosius savybių pavadinimus: Pasirinkite aprašomuosius pavadinimus savo individualioms savybėms, kurie aiškiai nurodytų jų paskirtį. Tai padarys jūsų CSS skaitomesnį ir lengviau prižiūrimą. Pavyzdžiui, vietoj --color, naudokite --primary-button-color.
• Kruopščiai testuokite: Išbandykite savo CSS skirtingose naršyklėse ir įrenginiuose, kad įsitikintumėte, jog jis veikia kaip tikėtasi. Ypatingą dėmesį skirkite animacijoms ir perėjimams, nes tai yra sritys, kuriose @property taisyklė gali turėti didžiausią poveikį.
• Dokumentuokite savo kodą: Pridėkite komentarus prie savo CSS, kad paaiškintumėte savo individualių savybių paskirtį ir kaip jos naudojamos. Tai padės kitiems kūrėjams (ir jums ateityje) suprasti jūsų kodą.

Prieinamumo aspektai

Naudojant @property taisyklę, svarbu atsižvelgti į prieinamumą. Užtikrinkite, kad jūsų animacijos ir perėjimai nebūtų per daug blaškantys ar dezorientuojantys vartotojams su kognityvinėmis negaliomis. Venkite naudoti animacijų, kurios mirga ar blyksi, nes tai gali sukelti priepuolius kai kuriems asmenims.

Taip pat įsitikinkite, kad jūsų spalvų pasirinkimas užtikrina pakankamą kontrastą vartotojams su regėjimo sutrikimais. Galite naudoti įrankius, tokius kaip „WebAIM Contrast Checker“, kad patikrintumėte, ar jūsų spalvų deriniai atitinka prieinamumo gaires.

Globalūs aspektai

Kuriant svetaines ir programas pasaulinei auditorijai, svarbu atsižvelgti į kultūrinius skirtumus ir lokalizaciją. Štai keletas dalykų, kuriuos reikia turėti omenyje naudojant @property taisyklę globaliame kontekste:

• Teksto kryptis: Būkite atidūs teksto krypčiai (iš kairės į dešinę vs. iš dešinės į kairę), kai naudojate individualias savybes maketui ar pozicionavimui valdyti. Naudokite logines savybes (pvz., margin-inline-start vietoj margin-left), kad užtikrintumėte, jog jūsų maketas tinkamai prisitaikys prie skirtingų teksto krypčių.
• Skaičių ir datų formatai: Atsižvelkite į skirtingus skaičių ir datų formatus, naudojamus skirtingose šalyse. Venkite griežtai koduoti konkrečius formatus savo CSS ir vietoj to pasikliaukite numatytuoju naršyklės formatavimu arba naudokite „JavaScript“ skaičiams ir datoms formatuoti pagal vartotojo lokalę.
• Spalvų simbolika: Būkite sąmoningi, kad spalvos gali turėti skirtingas reikšmes skirtingose kultūrose. Venkite naudoti spalvas, kurios tam tikrose kultūrose gali būti laikomos įžeidžiančiomis ar netinkamomis.
• Kalbų palaikymas: Užtikrinkite, kad jūsų individualios savybės teisingai veiktų su skirtingomis kalbomis. Išbandykite savo svetainę su įvairiomis kalbomis, kad nustatytumėte galimas problemas.

CSS individualių savybių ir @property taisyklės ateitis

@property taisyklė yra reikšmingas žingsnis į priekį CSS evoliucijoje. Kadangi naršyklių palaikymas toliau gerėja, galime tikėtis dar daugiau novatoriškų šios galingos funkcijos panaudojimo būdų. Ateityje galime pamatyti naujų sintaksės reikšmių, pridėtų prie @property taisyklės, kad būtų palaikomi sudėtingesni duomenų tipai, pavyzdžiui, masyvai ir objektai. Taip pat galime pamatyti geresnę integraciją su „JavaScript“, leidžiančią kūrėjams dinamiškai kurti ir manipuliuoti individualiomis savybėmis vykdymo metu.

Individualių savybių ir @property taisyklės derinys atveria kelią modulinei, lengviau prižiūrimai ir galingesnei CSS architektūrai. Priimdami šias funkcijas, kūrėjai gali sukurti sudėtingesnes ir patrauklesnes interneto patirtis, kurios yra prieinamos vartotojams visame pasaulyje.

Išvada

@property taisyklė suteikia žiniatinklio kūrėjams galimybę apibrėžti individualių savybių tipus, atveriant naujas galimybes animacijoms, temų kūrimui ir bendrai CSS architektūrai. Suprasdami jos sintaksę, galimybes ir geriausias praktikas, galite pasinaudoti šia galinga funkcija, kad sukurtumėte tvirtesnes, lengviau prižiūrimas ir vizualiai patrauklesnes interneto programas. Augant naršyklių palaikymui, @property taisyklė neabejotinai taps esminiu įrankiu šiuolaikinio žiniatinklio kūrėjo įrankių rinkinyje. Priimkite šią technologiją, eksperimentuokite su jos galimybėmis ir atskleiskite visą CSS individualių savybių potencialą.

Papildoma literatūra

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1